<template>
  <section>
    <div class="list-item flex" v-for="item in goodsList" :key="item.id" @tap="goodsDetail(item.id)">
      <div class="goods-pic">
        <div class="pic-box">
          <img :src="item.image" alt="缩略图">
        </div>
      </div>
      <div class="goods-info">
        <p class="goods-desc mui-ellipsis-2" v-text="item.name">--</p>
        <div>
          <span class="price" v-text="`￥${item.price || 0}`">￥--</span>
          <span class="pay-peo" v-text="`${item.sale_volume || 0}人付款`">0人付款</span>
        </div>
        <span class="free-badge" v-if="item.is_baoyou == 0">包邮</span>
      </div>
    </div>
  </section>
</template>

<script>
  import {MH_API} from "@/api/api";
  export default {
    name: "goods-list",
    data () {
      return {
        goodsList: [
          // {
          //   id: '1',
          //   pic: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3316084142,727466806&fm=200&gp=0.jpg',
          //   desc: '郁金香玫瑰满天星花束套餐，送给最美丽的她,长长长长标题啦啦啦啦啦啦啦啦啦啦',
          //   price: 198.0,
          //   payNum: 3098,
          //   freePostage: 1
          // }
        ]
      }
    },
    methods: {
      getData(type){
        let self = this;
        let params = {
          type: type
        };
        MH_API.goodsList(params).then(res => {
          if (res.status === 200) {
            self.goodsList = res.data;
          }
        })
      },
      goodsDetail (id) {
        this.$router.push({
          path: '/goods/'+id,
          params: {
            id: id
          }
        })
      }
    },
    created(){
      this.getData(1);
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../assets/css/mixin";
  .list-item {
    background-color: #fff;
    padding: .8rem;
    border-bottom: 1px solid #eee;
  }
  .pic-box {
    width: 8.5rem;
    height: 8.5rem;
    overflow: hidden;
    flex-flow: wrap;
    &>img {width: 100%;}
  }
  .goods-info {
    margin: 0 .8rem;
    .price {@include sc(1.4rem, #f26c60);}
    .pay-peo {
      margin-left: 1rem;
      @include sc(1.2rem, #999);
    }
    .free-badge {
      padding: 0 .4rem;
      @include sc(1rem, #ffa004);
      border: 1px solid #ffa004;
      border-radius: .7rem;
    }
  }
  .goods-desc {@include sc(1.5rem, #333);}
</style>
